<template>
  <div class="show-main">
    <el-scrollbar style="height:100%">
      <el-form :inline="true" :model="searchForm" ref="searchForm" class="demo-form-inline" size="small">
        <el-form-item label="">
          <el-date-picker v-model="date" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss"
            @change="dateChnage">
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="拒绝退款" value="-3"></el-option>
            <el-option label="用户评价" value="6"></el-option>
            <el-option label="系统评价" value="7"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click.stop="search(true)">搜索</el-button>
          <el-button type="success" @click.stop="search">刷新</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="table" border size="small">
        <el-table-column prop="order_no" label="订单编号"></el-table-column>
        <el-table-column prop="goods_price" label="商品总价"></el-table-column>
        <!-- <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            {{statusName(scope.row.status)}}
          </template>
        </el-table-column> -->
        <el-table-column prop="create_time" label="创建时间" width="150"></el-table-column>
      </el-table>
      <div class="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page" :page-sizes="[10,20,30,40]" :page-size="searchForm.limit"
          layout="total,slot, sizes, prev, pager, next, jumper" :total="count">
          <span class="el-pagination__total">商品总价: {{money}}</span>
        </el-pagination>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
import { getFinanceOrderList } from '@/network/api.js'

export default {
  name: 'financeorderlog',
  data() {
    return {
      searchForm: {
        page: 1,
        limit: 10,
        start: '',
        end: ''
        // status: ''
      },
      date: null,
      count: 0, // 总记录数
      money: 0, // 商品总价
      table: []
    }
  },
  created() {
    this.search()
  },
  computed: {
    // statusName() {
    //   return status => {
    //     switch (status) {
    //       case 6:
    //         return '用户评价'
    //       case 7:
    //         return '系统评价'
    //       case -3:
    //         return '拒绝退款'
    //     }
    //   }
    // }
  },
  methods: {
    dateChnage(value) {
      if (value === null) {
        this.searchForm.start = ''
        this.searchForm.end = ''
      } else {
        this.searchForm.start = value[0]
        this.searchForm.end = value[1]
      }
    },
    async search(pageInit = false) {
      try {
        if (pageInit === true) {
          this.searchForm.page = 1
        }
        const rtn = await getFinanceOrderList(this.searchForm)
        this.table = rtn.data.list
        this.count = rtn.data.count
        this.money = rtn.data.money
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 每页条数变化
    handleSizeChange(val) {
      this.searchForm.limit = val
      this.search()
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.search()
    }
  }
}
</script>
<style lang="less" scoped>
</style>
